<template>
<div class="wrap">
  <draggable class="page-border" element="div" v-model="openPages" v-bind="dragOptions" @start="drag = true" @end="drag = false">
    <transition-group key="tab" class="page-tabs-wapper" type="transition" :name="!drag ? 'flip-list' : null">
      <template>
        <span @click="switchPage(item)" :class="{'white': white, 'active': activeClass(item)}" :style="{fontSize:12+'px'}" @contextmenu.prevent="rightClick(index, item, $event)" class="page-tabs" v-for="(item, index) in openPages" :key="index" ref="pageTab">{{item.title}}<a-icon title="关闭页面" v-if="openPages.length !== 1" @click="closePage(item.path, item.key, $event)" class="close-icon" theme="filled" type="close-circle" />
      </span>
      </template>
    </transition-group>
  </draggable>
  <div v-if="rightMenu" class="right-menu-mask" @contextmenu.prevent="rightMenu = false" @click="rightMenu = false"></div>
  <div v-if="rightMenu" class="right-menu" :style="menuStyle">
    <ul>
      <li @click="closeOthers('all')">关闭其它标签页</li>
      <li v-if="menuData.index !== openPages.length - 1" @click="closeOthers('right')">关闭右侧标签页</li>
    </ul>
  </div>
</div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      rightMenu: false,
      menuData: {},
      drag: false,
    };
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        disabled: false,
        direction: 'horizontal',
      };
    },
    openPages: {
      set(data) {
        this.$store.commit('setOpenPages', data);
      },
      get() {
        return this.$store.state.openPages;
      },
    },
    menuStyle() {
      return {
        left: this.menuData.left,
        top: this.menuData.top,
      };
    },
  },
  props: {
    titleList: {
      type: Array,
      default: () => [],
    },
    white: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    activeClass(item) {
      return this.$route.path === item.path;
    },
    closeOthers(type) { // 关闭页面
      const theLeftPages = [];
      let theLeftPage = {};
      this.openPages.forEach((item, index) => {
        if (item.path === this.menuData.path) {
          theLeftPage = item;
        }
        if (type === 'right') {
          if (index <= this.menuData.index) {
            theLeftPages.push(item);
          }
        }
      });
      this.$store.commit('setOpenPages', type === 'right' ? theLeftPages : [theLeftPage]);
      this.$store.dispatch('updateNaviData', { key: theLeftPage.key });
      this.rightMenu = false;
      this.switchPage({ path: this.menuData.path, title: this.menuData.title });
    },
    closePage(path, key, e) { // 关闭当前页面
      e.stopPropagation();
      this.openPages.forEach((item, x) => {
        if (item.path === path) {
          this.$store.dispatch('deletePageByPath', { path });
          if (this.$route.path === item.path) { // 关闭当前页
            const localPage = this.openPages;
            const localPageTempFlag = typeof this.openPages[x - 1] !== 'undefined';
            this.$router.push(localPageTempFlag ? localPage[x - 1].path : localPage[x].path);
            const keyTemp = localPageTempFlag ? localPage[x - 1].key : localPage[x].key;
            this.$store.dispatch('updateNaviData', { key: keyTemp });
          }
        }
      });
    },
    rightClick(index, item, e) { // 右键菜单
      if (this.openPages.length !== 1) {
        this.rightMenu = true;
        this.menuData = {
          index,
          left: `${e.pageX}px`,
          top: `${e.pageY}px`,
          path: item.path,
          title: item.title,
          key: item.key,
        };
      }
    },
    switchPage({ path, key }) {
      if (this.$route.path !== path) {
        this.$router.push(path);
        this.$store.dispatch('updateNaviData', { key });
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
@import "../assets/css/common.stylus"
.breadcrumb
  .span
    margin-top: 2px
  disflex(row, flex-start, center)

.page-border
  disflex(row, flex-start, center);
  margin-top 10px
  padding-left 20px
  transform translateY(1px)
  position: relative
  z-index: 1
  .page-tabs-wapper
    disflex(row, flex-start, center);
    .page-tabs
      margin-right: 12px;
      display: inline-block;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      box-sizing: border-box;
      background-color: #F0F6FF;
      overflow hidden
      color: #666;
      user-select: none;
      padding 0 5px 0 6px
      disflex(row, flex-start, flex-start);
      height: 28px;
      line-height 28px
      cursor pointer
      border 1px solid #CCCCCC
      border-bottom 0
      font-size 14px
      .close-icon
        margin-left 5px
        margin-top 8px
        &:hover
          opacity .9
    .active
      background-color: #F0F0F0;
      &.white
        background-color: #fff;
.right-menu-mask
  top 0
  bottom 0
  left 0
  right 0
  z-index 1000
  // background-color rgba(255,255,255,.4)
  position absolute
.right-menu
  position: absolute;
  z-index: 1001;
  border-radius: 5px;
  user-select: none;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  ul
    padding: 0;
    margin: 0;
    disflex(column, flex-start, center);
    li
      list-style: none;
      display: inline-block;
      padding: 5px 8px;
      border-radius: 5px;
      transition: .3s all ease-in;
      cursor: pointer;
      &:hover
        background-color: #eff0ff;


</style>
